<template>
  <!-- 二手房详情页面 -->
  <view class="ershoudetail-content">
    <!--轮播图  -->
    <swiper
      class="swiper_content"
      :indicator-dots="false"
      :autoplay="true"
      :interval="3000"
      :duration="1000"
      circular="true"
    >
      <swiper-item v-for="item in curErHouseDetail.images" :key="item">
        <view class="swiper-item">
          <image :src="item"></image>
        </view>
      </swiper-item>
    </swiper>
    <!--/轮播图  -->
    <view class="infotext-content">
      <!-- 房屋详细数据 -->
      <view class="houseinfo">
        <view class="infohead">
          <view class="infohead-left">
            <view class="title">{{ curErHouseDetail.title }}</view>
            <!-- <view class="state">套三双卫</view> -->
          </view>
          <view class="interest" @click="changeinterest">
            <uni-icons v-if="!interest" type="heart" size="35"></uni-icons>
            <uni-icons v-else type="heart" size="35" color="red"></uni-icons>
            <text>{{ interest ? "取消" : "关注" }}</text>
          </view>
        </view>
        <view class="infoprice">
          <view class="infoprice-item">
            <view class="price">{{ curErHouseDetail.price }}万</view>
            <view class="infopricetext">售价</view>
          </view>
          <view class="infoprice-item">
            <view class="price">{{ type[curErHouseDetail.type - 1] }}</view>
            <view class="infopricetext">房型</view>
          </view>
          <view class="infoprice-item">
            <view class="price">{{ curErHouseDetail.area }} m²</view>
            <view class="infopricetext">建面</view>
          </view>
        </view>
        <view class="info-other">
          <view class="oneprice">
            单价：{{
              Math.floor(
                (curErHouseDetail.price / curErHouseDetail.area) * 10000
              )
            }}元/m²
          </view>
          <view class="property">
            <view class="property-left">
              <view class=""> 套内：{{ curErHouseDetail.coverArea }}m² </view>
              <view class=""> 产权：??????年 </view>
            </view>
            <view class="property-right">
              <view class=""> 朝向：{{ curErHouseDetail.toward }} </view>
              <view class="">
                装修：{{ furnish[curErHouseDetail.furnish - 1] }}
              </view>
            </view>
          </view>
          <view class="floor">
            楼层：{{ curErHouseDetail.floor }} （共{{
              curErHouseDetail.floors
            }}层）
          </view>
          <view class="communityName">
            小区：{{ curErHouseDetail.buildingName }}
          </view>
        </view>
      </view>

      <!-- 小区在售 -->
      <view class="onsale">
        <view class="sectiontitle"
          >小区在售({{ ershouhouselistInfo.length }})套</view
        >
        <view
          class="newhouselist-item"
          v-for="(item, index) in ershouhouselistInfo"
          :key="index"
        >
          <houseinfo-list :houseData="item" :housestyle="1"></houseinfo-list>
        </view>
      </view>
    </view>
    <!-- 底部功能 -->
    <view class="footFunction">
      <detail-bottom :managerInfo="managerInfo"></detail-bottom>
    </view>
  </view>
</template>

<script>
export default {
  onLoad(option) {
    this.currentId = option.id;
    this.getErshouDetail(option.id);
    this.getErshouHouseData(); //获取推荐新房数据
  },
  data() {
    return {
      curErHouseDetail: "",
      currentId: "", //当前详情的id
      type: ["一室一厅", "两室一厅", "三室一厅", "四室两厅", "五室两厅"],
      furnish: ["清水", "精装"],
      interest: false, //关注状态
      //二手房列表信息
      ershouhouselistInfo: [],
      managerInfo: {},
    };
  },
  methods: {
    //改变关注状态
    changeinterest() {
      this.interest = !this.interest;
    },
    async getErshouDetail(cur_id) {
      const { data } = await uni.$http.get("/house/one", { id: cur_id });
      this.curErHouseDetail = data.data;
      // console.log("二手房详情",this.curErHouseDetail)
      if (this.curErHouseDetail.contact) {
        this.managerInfo = {
          id: this.curErHouseDetail.publisher,
          name: this.curErHouseDetail.contact,
          mobile: this.curErHouseDetail.tel,
          type: 2,
        };
      } else {
        this.getManager(data.data.brokers[0]);
      }
    },
    // 请求二手房推荐数据
    async getErshouHouseData() {
      const { data: res } = await uni.$http.get("/house/page", {
        pageNo: 1,
        pageSize: 50,
        status: 2,
        recommend: true,
      });
      this.ershouhouselistInfo = res.data.records;
    },
    // 获取经纪人信息
    async getManager(id) {
      const { data } = await uni.$http.get("/broker/one", { id });
      this.managerInfo = data.data;
    },
  },
};
</script>

<style lang="scss" scoped>
.ershoudetail-content {
  width: 100%;
  height: 100%;
  position: relative;
  background-color: #f4f5f4;
  .swiper_content {
    width: 100%;
    height: 360rpx;
    .swiper-item {
      width: 100%;
      height: 100%;
      image {
        width: 100%;
        height: 100%;
      }
    }
  }
  .infotext-content {
    position: absolute;
    left: 0;
    top: 300rpx;
    width: 96%;
    margin: 0 2%;
    padding-bottom: 170rpx;
    .houseinfo {
      width: 94%;
      border-radius: 10rpx;
      background-color: #ffffff;
      padding: 40rpx 20rpx 20rpx 20rpx;
      .infohead {
        width: 100%;
        display: flex;
        justify-content: space-between;
        padding: 0rpx 0 10rpx 0;
        .infohead-left {
          display: flex;
          .title {
            font-size: 40rpx;
            color: #000000;
            font-weight: bold;
          }
          .state {
            font-size: 40rpx;
            color: #000000;
            font-weight: bold;
            margin-left: 20rpx;
          }
        }
        .interest {
          margin-right: 40rpx;
          display: flex;
          flex-direction: column;
          align-items: center;
          justify-content: center;
          color: #000000;
          image {
            width: 80rpx;
            height: 80rpx;
            margin-bottom: 10rpx;
          }
        }
      }
      .infoprice {
        display: flex;
        justify-content: space-between;
        .infoprice-item {
          display: flex;
          flex-direction: column;
          .price {
            font-size: 32rpx;
            font-weight: 400;
            color: #fc1824;
          }
          .infopricetext {
            font-size: 25rpx;
            color: #e0e1e0;
          }
        }
      }
      .info-other {
        margin-top: 10rpx;
        font-size: 25rpx;
        color: #000000;
        font-weight: 400;
        .property {
          display: flex;
          justify-content: space-between;
          .property-left,
          .property-right {
            width: 50%;
            display: flex;
            flex-direction: column;
            view {
              margin-top: 10rpx;
            }
          }
        }
        .floor,
        .communityName {
          margin-top: 10rpx;
        }
      }
    }
    .onsale {
      margin-top: 100rpx;
      width: 94%;
      border-radius: 10rpx;
      background-color: #ffffff;
      padding: 20rpx 20rpx 20rpx 20rpx;
      .sectiontitle {
        font-size: 40rpx;
        color: #000000;
        font-weight: 400;
        margin-bottom: 30rpx;
      }
    }
  }
  .footFunction {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 150rpx;
  }
}
</style>
